<!--
 * @Author: zhangwei 1405298045@qq.com
 * @Date: 2022-03-01 15:52:45
 * @LastEditTime: 2022-09-03 10:34:29
 * @LastEditors: 张伟 10187258+zhang_wei_self@user.noreply.gitee.com
 * @Description: 
 * @FilePath: /ll-fe-mp-dyfx/src/otherPage/components/MessageTemplate.vue
 *  
-->
<template>
	<view
		class="MessageTemplate"
		:class="{
			'message-skelett': isSkelett
		}"
	>
		<view class="MessageTemplate-main" :class="[type]">
			<view
				:key="item.id || index"
				v-for="(item, index) in messageList"
				class="MessageTemplate-main-item"
				@click.prevent.stop="openCurrentDataDetails(item, index)"
			>
				<!-- 1-未读，4-已读，6-置顶 -->
				<view
					:class="{
						unread: item.status === 1
					}"
					class="MessageTemplate-main-item-title"
				>
					<text>{{ item.messageTitle }}</text>
				</view>

				<view class="MessageTemplate-main-item-content">
					<text>{{ item.messageContent }}</text>
				</view>

				<view class="MessageTemplate-main-item-footer">
					<view class="MessageTemplate-main-item-footer-left">
						<text>{{ item.sendDate }}</text>
					</view>
					<view class="MessageTemplate-main-item-footer-right">
						<text>查看详情</text>
						<image src="@/static/icon/icon_i_list_right.png" />
					</view>
				</view>
			</view>

			<DistributionHint :type="hintStatus" :top="hintTop" />
		</view>
	</view>
</template>

<script>
import DistributionHint from '@/components/distributionHint';

const jumpObject = {
	explore: {
		detail: '/productOrderPage/orderDetails',
		toBeConfirmed: '/pages/tabBar/order'
	},

	material: {
		buy: '/materialPage/MaterialOrderBuy',
		applying: '/materialPage/MaterialReviewOrder',
		applySuccess: '/materialPage/MaterialOrderPass'
	},

	income: '/otherPage/IncomeDetail'
};

export default {
	name: 'MessageTemplate',

	props: {
		type: {
			type: String,
			default: 'explore'
		},

		title: {
			type: String,
			default: '联联探客'
		},

		list: {
			type: Array,
			default() {
				return [];
			}
		},

		isSkelett: {
			type: Boolean,
			default: true
		},

		skelettSize: {
			type: Number,
			default: 4
		},

		hintStatus: {
			type: String,
			default: ''
		}
	},

	computed: {
		hintTop() {
			const { hintStatus } = this;

			if (hintStatus !== 'nodata') {
				return '0rpx';
			}

			return '100px';
		},

		messageList() {
			const { list, isSkelett, skelettSize } = this;

			if (!isSkelett) {
				return list;
			}

			return Array.from({ length: skelettSize }).map((item) => ({}));
		},

		currentParams() {
			const { type } = this;

			return jumpObject[type];
		}
	},

	methods: {
		openCurrentDataDetails(params, index) {
			const { type, messageList, currentParams } = this;
			const { id, status, selfParams } = params;

			let formatSelfParams = JSON.parse(selfParams);

			let url = '';
			if (typeof currentParams === 'string') {
				url = `${currentParams}?orderId=${formatSelfParams?.id || ''}`;
			} else {
				const segmentationList = messageList.slice(0, index);

				if (segmentationList.length) {
					const newParams = segmentationList.find((item) => {
						const formatItem = JSON.parse(item.selfParams);

						return formatItem.id === formatSelfParams.id;
					})?.selfParams;

					newParams &&
						(formatSelfParams = {
							...JSON.parse(newParams),
							itemId: id
						});
				}

				if (type === 'explore') {
					const { status } = formatSelfParams;
					const isStatus = status === 21;

					url = `${currentParams[isStatus ? 'toBeConfirmed' : 'detail']}`;
					!isStatus && (url += `?orderId=${formatSelfParams?.id || ''}`);
				} else {
					// UR素材上传的订单incomeStatus就是true；SC用户下载的订单incomeStatus就是false
					const { uploadNo, approveStatus, productId, cartOrderNo } = formatSelfParams;
					const incomeStatus = (uploadNo || '').startsWith('UR');

					let orderStatus = '';
					if (incomeStatus) {
						orderStatus = [0, 1, 2, 6].includes(approveStatus) ? 'review' : 'finish';
					} else {
						orderStatus = [1].includes(approveStatus) ? 'finish' : '';
					}

					const params = `orderId=${productId}&approveStatus=${approveStatus}&uploadNo=${uploadNo}&cartOrderNo=${cartOrderNo}`;

					if (incomeStatus) {
						url = `${currentParams[orderStatus === 'review' ? 'applying' : 'applySuccess']}?${params}`;
					} else {
						url = `${currentParams?.buy}?${params}`;
					}
				}
			}
			if (type === 'explore' && status === 21) {
				uni.switchTab({
					url: `/pages/tabBar/order`
				});
				return;
			}
			uni.navigateTo({
				url,
				success: () => {
					status === 1 &&
						this.$emit('callBack', {
							...formatSelfParams,
							itemId: id
						});
				}
			});
		}
	},

	components: {
		DistributionHint
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.MessageTemplate {
	padding: 10rpx 20rpx 0;

	// 骨架图
	&.message-skelett {
		.MessageTemplate-main-item-title,
		.MessageTemplate-main-item-content,
		.MessageTemplate-main-item-footer > view {
			width: 200rpx;
			border-radius: 8rpx;
			background: $skelettBgColor;

			text,
			image {
				visibility: hidden;
			}
		}

		.MessageTemplate-main-item-content {
			width: 100%;
		}
	}

	&-main {
		padding: 32rpx 28rpx 0;
		border-radius: 24rpx 24rpx 0 0;
		@include Db_iosBottomDistance(20rpx);

		&.explore {
			background: linear-gradient(180deg, #f3f8ff 0%, #fff 100%);
		}

		&.material {
			background: linear-gradient(180deg, #fff3f3 0%, #fff 100%);
		}

		&.income {
			background: linear-gradient(180deg, #fff9e6 0%, #fff 100%);
		}

		&-item {
			padding: 24rpx 0;
			box-shadow: inset 0px -2rpx 0px 0px rgba(238, 238, 238, 0.5);

			&-title {
				color: #292f36;
				font-size: 32rpx;
				font-weight: 500;

				&.unread {
					position: relative;
					padding-left: 20rpx;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background: #f55f4e;
						transform: translateY(-50%);
					}
				}
			}

			&-content {
				min-height: 64rpx;
				margin-top: 32rpx;

				color: #666;
				font-size: 24rpx;
				line-height: 32rpx;
			}

			&-footer {
				margin-top: 16rpx;

				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				color: #999;
				font-size: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
}
</style>
